<template>
  <div class="cloud-page">
    <!-- 顶部导航及分类 -->
    <div class="top-nav">
      <div class="title">云圈</div>
      <div class="top-icons">
        <div 
          v-for="(item, index) in topIcons" 
          :key="index" 
          class="icon-item"
        >
          <img :src="item.icon" alt="" class="icon-img" />
          <span class="icon-text">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- 云村解忧杂货铺信息 -->
    <div class="grocery-store ">
      <div class="left">
        <div class="title" style="font-weight: 1000;margin-bottom: 6px;">云村解忧杂货铺</div>
        <div class="left" style="font-size: 10px;color: #736d6d;margin-bottom: 6px;">7.4万树洞信使,5741人在线＞</div>
      </div>
      <!-- 邀请好友按钮 -->
      <div class="right">
         <van-button size="normal" color="#4169E1" round type="default"  @click="playerMode">邀请好友</van-button>
      </div>
    </div>
    <!-- 标签栏 -->
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index" 
        @click="activeTab = tab.key" 
        :class="{ active: activeTab === tab.key }"
      >
        {{ tab.name }}
      </button>
    </div>
    <!-- 讨论群列表 -->
    <div class="group-list">
      <div class="discussion-title" v-if="activeTab === 'groupChat'">讨论群</div>
      <div 
        v-for="(group, index) in groupList" 
        :key="index" 
        class="group-item"
      >
        <div class="left">
          <img :src="group.avatar" alt="" class="group-avatar" />
          <div class="group-info">
            <h3 class="group-title">{{ group.title }}</h3>
            <p class="group-desc">{{ group.desc }}</p>
          </div>
        </div>
        <span class="group-count" v-if="group.count">{{ group.count }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
const topIcons = [
  {
    icon: 'https://img.shetu66.com/2023/03/23/1679552764481675.jpg', 
    name: '广场',
  },
  {
    icon: 'https://img.shetu66.com/2022/11/03/1667459511305837.jpg', 
    name: '云村',
  },
  {
    icon: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.hcF45yQ8BuU8BXD-NyfsBQAAAA?rs=1&pid=ImgDetMain&o=7&rm=3', 
    name: '摇滚的',
  },
  {
    icon: 'https://img.shetu66.com/2023/04/25/1682391068745168.png', 
    name: '房东的猫',
  },
  {
    icon: 'https://www.keaitupian.cn/cjpic/frombd/2/253/2311324952/3195114103.jpg', 
    name: '蒸汽波',
  },
  {
    icon: 'https://picx1.zhimg.com/v2-056e22d3f54164924938f963852d6657_r.jpg?source=1940ef5c', 
    name: '失真',
  },
];

// 邀请好友点击事件
const playerMode = () => {
  showToast('邀请好友，与你一起解忧');
};

const tabs = [
  { key: 'groupChat', name: '群聊' },
  { key: 'circleDynamic', name: '圈内动态' },
  { key: 'anonymousMail', name: '匿名信箱' },
];

const groupList = [
  {
    avatar: 'https://img.shetu66.com/2023/04/25/1682409626903461.png', 
    title: '解忧音乐安利🎧',
    desc: '王科学Dr: 是今晚发新歌吗，好期待哦',
    count: '64',
  },
  {
    avatar: 'https://img.shetu66.com/2023/05/16/1684218213212413.png', 
    title: '说出自己的小秘密🥺',
    desc: '麻山: 好久不见',
    count: '32',
  },
  {
    avatar: 'https://img95.699pic.com/photo/50059/8720.jpg_wh300.jpg!/fh/300/quality/90', 
    title: '暗恋这件小事💖',
    desc: '是你的垚_本人: 正好能看见萤火虫',
    count: '',
  },
  {
    avatar: 'https://n.sinaimg.cn/sinacn/w1620h1080/20180114/1368-fyqrewh8674044.jpg', 
    title: '终于等到你✨',
    desc: '一块苏皮糖: 这不得多听几遍么?',
    count: '',
  },
];

const activeTab = ref('groupChat');

const inviteFriend = () => {
  // 可扩展邀请好友逻辑，比如调起分享等
  alert('邀请好友功能可在此扩展实现～');
};
</script>

<style scoped>
.cloud-page {
  min-height: 100vh;
  background-color: #f4f4f4;
  position: relative;
}
.top-nav {
  background-color: #bfa;
  padding: 10px;
}
.top-nav .title {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.top-icons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.icon-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.icon-text {
  font-size: 12px;
  margin-top: 2px;
}
.grocery-store {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1px;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  .left{
    justify-content: flex-start;
    flex-direction: column;
  }
}

.tabs {
  display: flex;
  gap: 20px;
  margin: 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
.tabs button {
  cursor: pointer;
  color: #333;
  font-size: 14px;
  padding-bottom: 5px;
  background: transparent;
  border: none;
}
.tabs button.active {
  color: #ff5722;
  border-bottom: 2px solid #ff5722;
}
.group-list {
  margin: 10px;
}
.discussion-title {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}
.group-item {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.group-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.group-info {
  display: flex;
  flex-direction: column;
}
.group-title {
  font-size: 14px;
  font-weight: bold;
}
.group-desc {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.group-count {
  font-size: 12px;
  color: #999;
  background-color: #f4f4f4;
  padding: 4px 8px;
  border-radius: 4px;
}
</style>